<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增表列表')" />
    <th:block th:include="include :: select2-css" />
    <th:block th:include="include :: bootstrap-select-css" />

</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-table-add">
            <div class="form-group">    
                <label class="col-sm-3 control-label">目录ID：</label>
                <div class="col-sm-8">
                    <input name="catalogueId" id="catalogueId" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">源-数据仓库名称：</label>
                <div class="col-sm-8">
                    <select class="form-control" id="db-select" name="dbNameSource">
                        <option value="">--请选择开发语言--</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">源-表名：</label>
                <div class="col-sm-8">
                    <select class="form-control" id="table-select" name="tableNameSource">
                        <option value="">--请选择表--</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">目的地-存储目录名称：</label>
                <div class="col-sm-8">
                    <select class="form-control" id="catalogue-select" name="catalogueName">
                        <option value="">--请选择存储目录--</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">目的地-表名：</label>
                <div class="col-sm-8">
                    <input name="catalogueTableName" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">采集方式：</label>
                <div class="col-sm-8">
                    <input name="collectionMethod" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">记录数：</label>
                <div class="col-sm-8">
                    <input name="tableCounts" class="form-control" type="text">
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
        $(function(){
            // 初始加载数据库
            function initDB() {
                var url = ctx + "db/info/list";
                $.post(url,successDBName);
                function successDBName(data){
                    $("#db-select option").remove();
                    $("#db-select").append("<option value=\"\">--请选择数据库--</option>");
                    $.each(data.rows,function(index,value){
                        $("#db-select").append("<option value='"+value.dbName+"'>"+value.dbName+"</option>");
                    });
                }
            }

            // 初始化数据目录
            function initCatalogue(){
                var url = ctx + "catalogue/classify/list";
                $.post(url,successCatalogue);
                function successCatalogue(data){
                    $("#catalogue-select option").remove();
                    $("#catalogue-select").append("<option value=\"\">--请选择存储目录--</option>");
                    $.each(data,function(index,value){
                        $("#catalogue-select").append("<option value='"+value.catalogueName+"'>"+value.catalogueName+"</option>");
                    });
                }
            }

            initDB();
            initCatalogue();

            // 数据库变化，查询库里面的表
            $("#db-select").change(function(){
                getTableName();
            });

            // 加载表名
            function getTableName() {
                var dbName = $("#db-select").val();
                var url = ctx + "db/table/search/tables?dbName="+dbName;
                $.get(url,successTableList);
                function successTableList(data){
                    // 填充表
                    $("#table-select option").remove();
                    $("#table-select").append("<option value=\"\">--请选择表--</option>");
                    $.each(data,function(index,value){
                        $("#table-select").append("<option value='"+value.tableName+"'>"+value.tableName+"</option>");
                    });
                }
            }
        });




        var prefix = ctx + "table/table"
        $("#form-table-add").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                var params = $('#form-table-add').serialize();
                console.log("params",params);
                $.operate.save(prefix + "/add", $('#form-table-add').serialize());
            }
        }
    </script>
    <th:block th:include="include :: select2-js" />
    <th:block th:include="include :: bootstrap-select-js" />
</body>
</html>